<template>
  <div class="d-box">
    <van-nav-bar :title="list.hospital" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="d-top">
      <div class="yi">
        <img :src="list.img" alt="" class="yi-img">
        <h4>{{ list.hospital }}</h4>
        <p class="yi-p-span">
          <span>公立</span>
          <span>三级乙等</span>
          <span>综合</span>
        </p>
        <p class="yi-p">医院概况：<span class="ckjj">查看简介 ></span></p>
      </div>
    </div>
    <div class="d-center">
      <p class="d-ju">距您{{ list.distance }}km</p>
      <p class="d-address">{{ list.address }}</p>
      <button class="d-go" @click="qgh(item)">去挂号</button>
    </div>
    <div class="d-bottom">
      <p>本院医生</p>
      <div class="btm-box" v-for="(item,index) in lists" :key="index">
        <div class="d-left">
          <img :src="item.avatar" alt="">
        </div>
        <div class="d-right">
          <div><span class="r-name">{{item.name}}</span><span class="r-p">{{ item.position }}</span></div>
          <button class="qgh" @click="qgh(item)">去挂号</button>
          <div class="l-h"><span>{{ list.hospital }}</span></div>
          <div>擅长：{{ item.brief }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const onClickLeft = () => history.back()

import { ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const list = ref([])
const lists = ref([])
const id = ref(route.query.id)
const getlist = async ()=>{
 await axios.get('/api/registration',{params:{id:id.value}}).then(res=>{
  list.value = res.data.data
  console.log(res.data.data)
  lists.value = res.data.data.doctors
  console.log(res.data.data.doctors)
})
}
const qgh = (item)=>{
  // console.log(item,'1')
  router.push('/keshi?id='+item)
}
getlist()

</script>

<style scoped>
.d-box{
  width: 100%;
  height: 1330px;
  background-color: #F5F5F5;
  overflow: auto;
}
.d-top{
  width: 100%;
  height: 320px;
  background: linear-gradient(to bottom, #E9F8F6,#F5F5F5);
  position: relative;
  /* #E9F8F6 */
}
.yi{
  width: 90%;
  height: 220px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 5%;
  border-radius: 10px;
}
.yi-img{
  width: 100px;
  height: 120px;
  margin-left: 30px;
  margin-top: -65px;
  border-radius: 10px;
}
h4{
  margin-left: 30px;
  font-size: 30px;
}
.yi-p-span{
  margin: 20px 0;
  margin-left: 30px;
}
.yi-p-span>span{
  padding: 5px;
  border: 1px solid #0CC48E;
  border-radius: 5px;
  color: #0CC48E;
  margin-right: 15px;
  font-size: 20px;
}
.yi-p{
  margin-left: 30px;
}
.ckjj{
  float: right;
  margin-right: 30px;
  color: #0CC48E;
}
.d-center{
  width: 90%;
  height: 210px;
  margin-left: 5%;
  background-color: #fff;
  margin-top: 15px;
  border-radius: 10px;
}
.d-ju{
  font-size: 25px;
  font-weight: 600;
  margin: 0 30px;
  padding-top: 20px;
}
.d-address{
  margin: 10px 30px;
  font-size: 25px;
  color: #AFAFAF;
}
.d-go{
  width: 90%;
  height: 70px;
  margin-left: 5%;
  border: none;
  border-radius: 35px;
  font-size: 30px;
  background-color: #00C188;
  color: #fff;
  margin-top: 10px;
}
.d-bottom{
  width: 90%;
  height: 660px;
  background-color: #fff;
  margin-left: 5%;
  margin-top: 15px;
  border-radius: 10px;
}
.d-bottom>p{
  margin-left: 30px;
  padding-top: 30px;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 50px;
}
.btm-box{
  width: 90%;
  height: 180px;
  margin-left: 5%;
  border-bottom: 1px solid #ccc;
  display: flex;
  position: relative;
}
.d-left{
  width: 20%;
  height: 100%;
}
.d-left>img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 20px;
}
.d-right{
  margin-top: 20px;
  margin-left: 20px;
  font-size: 20px;
}
.r-name{
  font-weight: 600;
  font-size: 28px;
}
.r-p{
  font-size: 24px;
  font-weight: 600;
  margin-left: 10px;
}
.qgh{
  padding: 8px 15px;
  border: none;
  border-radius: 30px;
  position: absolute;
  right: 20px;
  top: 30px;
  color: #fff;
  background-color: #00C188;
}
.l-h{
  margin: 10px 0;
}
</style>
